<template>
    <div class="sys-login">
        <el-row>
            <el-col :sm="2" class="hidden-xs-only"><div>&nbsp;</div></el-col>
            <el-col :sm="10" class="hidden-xs-only">
                <div class="sys-functions">
                    <div >
                        <h1><strong>欢迎使用铭仁管理系统</strong></h1>
                    </div>
                    <ul>
                        <li><i class="fa fa-arrow-circle-o-right"></i> 订单管理</li>
                        <li><i class="fa fa-arrow-circle-o-right"></i> 收款管理</li>
                        <li><i class="fa fa-arrow-circle-o-right"></i> 工时管理</li>
                        <li><i class="fa fa-arrow-circle-o-right"></i> 发票管理</li>
                        <li><i class="fa fa-arrow-circle-o-right"></i> 外发管理</li>
                    </ul>
                </div>
            </el-col>
            <el-col :sm="10">
                <div class="login-area">
                    <!--<div class="logo">
                        <img src="~static/images/logo.png" alt="">
                    </div>-->
                    <div class="form-group">
                        <h3 class="text-center">用户登录</h3>
                        <p class="text-center">欢迎登录管理系统</p>

                        <el-form :model="loginForm" :rules="loginRules" ref="loginForm"
                                 label-position="left" label-width="0px">
                            <el-form-item prop="name">
                                <el-input v-model="loginForm.name" type="text"
                                    @keyup.enter.native="submitForm"
                                    suffix-icon="fa fa-user" :placeholder="$t('global.username')">
                                </el-input>
                            </el-form-item>

                            <el-form-item prop="password">
                                <el-input v-model="loginForm.password" type="password"
                                    @keyup.enter.native="submitForm"
                                    suffix-icon="fa fa-lock" :placeholder="$t('global.password')">
                                </el-input>
                            </el-form-item>

                            <el-form-item prop="captcha" v-if="captcha.show" class="captcha">
                                <img :src="captcha.src" alt="">
                                <el-input v-model="loginForm.captcha" type="text"
                                          :placeholder="$t('global.captcha')">
                                </el-input>
                            </el-form-item>

                            <a class="btn-login" type="primary" @click="submitForm()">{{$t('global.login')}}</a>
                        </el-form>
                        <div v-if="sysMsg" class="err-msg">{{sysMsg}}</div>
                    </div>

                </div>
            </el-col>
            <el-col :sm="2" class="hidden-xs-only"></el-col>
        </el-row>

    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import setTheme from "@/util/setTheme"

export default {
    data() {
        return {
            loginForm: {
                name: 'supadmin',
                password: '111111',
                captcha: ''
            },
            loginRules: {
                name: [
                    {required: true, message: '', trigger: 'blur'}
                ],
                password :[
                    {required: true, message: '', trigger: 'blur'}
                ],
                captcha: [
                    {required: false, message: '', trigger: 'blur'}
                ]
            },
            captcha: {
                show: false,
                loginErrTimes: 0,
                src: ''
            },
            sysMsg: ''
        }
    },
    computed: {
        ...mapState({
            lang: state => state.lang,
            theme: state => state.theme
        })
    },
    watch: {
        "captcha.show"(val){
            this.loginRules.captcha[0].required = val
        }
    },
    beforeMount(){
        // 初始化错误信息。保证单独点击input时可以弹出正确的错误提示
        this.setErrMsg()
    },
    methods: {
        ...mapActions({
            login: 'auth/loginByUserInfo',
            loadLang: 'loadLang'
        }),
        submitForm(){
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.login({
                        username: this.loginForm.name,
                        password: this.loginForm.password
                    }).then(res => {
                        console.log("1111", res.result);
                        if(res.status == 200){
                            this.$router.push('home')
                        } else {
                            this.sysMsg = res.msg;
                            this.captcha.loginErrTimes += 1;
                            if(this.captcha.loginErrTimes >= 3){
                                this.captcha.show = true;
                                this.captcha.src = res.captcha;
                            }
                        }
                    })
                } else {
                    return false
                }
            });
        },
        changeLang(val){
            if(val == this.lang) return
            // 切换语言后重新加载语言包，并对重置登陆表单
            this.loadLang(val).then(() => {
                this.setErrMsg()
                this.$refs.loginForm.resetFields()
            })
        },
        changeTheme(val){
            if(val == this.lang) return
            setTheme(val)
            this.$store.commit("setThemeColor", val)
        },
        setErrMsg(){
            this.loginRules.name[0].message = this.$t('global.errMsg.inputRequired', {cont: this.$t('global.username')})
            this.loginRules.password[0].message = this.$t('global.errMsg.inputRequired', {cont: this.$t('global.password')})
            this.loginRules.captcha[0].message = this.$t('global.errMsg.inputRequired', {cont: this.$t('global.captcha')})
        }
    }
}
</script>
